<template>
  <el-dialog :title="title" :visible="visible" width="600px" :before-close="closeForm" :close-on-click-modal="false">
    <el-form ref="pageEdit" label-width="120px" :model="page" :rules="rules">
      <el-form-item label="页面名称" prop="PageName">
        <el-input v-model="page.PageName" maxlength="50" placeholder="页面名称" />
      </el-form-item>
      <el-form-item label="页面分类" prop="PageClassify">
        <treeDicItem v-model="page.PageClassify" :dic-id="DictItemDic.pageClassify" placeholder="页面分类" />
      </el-form-item>
      <el-form-item label="页面说明" prop="PageShow">
        <el-input v-model="page.PageShow" type="textarea" maxlength="100" placeholder="页面说明" />
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="resetForm">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { DictItemDic } from '@/customForm/config/formConfig'
import * as pageApi from '@/customForm/api/page'
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    },
    pageClassify: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      title: '新增页面',
      source: {},
      page: {
        PageName: null,
        PageClassify: null,
        PageShow: null
      },
      rules: {
        PageName: [
          {
            required: true,
            message: '页面名不能为空！',
            trigger: 'blur'
          }
        ],
        PageClassify: [
          {
            required: true,
            message: '页面分类不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    save() {
      const that = this
      this.$refs['pageEdit'].validate((valid) => {
        if (valid) {
          if (that.id) {
            that.set()
          } else {
            that.add()
          }
        } else {
          return false
        }
      })
    },
    async set() {
      await pageApi.Set(this.id, this.page)
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    async add() {
      await pageApi.Add(this.page)
      this.$message({
        message: '添加成功!',
        type: 'success'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true)
    },
    async reset() {
      if (this.id == null) {
        this.title = '新增页面'
        this.source = null
        this.page = {
          PageName: null,
          PageClassify: this.pageClassify,
          PageShow: null
        }
      } else {
        const data = await pageApi.Get(this.id)
        this.source = data
        this.page = Object.assign({}, data)
        this.title = '编辑页面:' + data.PageName
      }
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    resetForm() {
      if (this.id == null) {
        this.page = {
          PageName: null,
          PageClassify: this.pageClassify,
          PageShow: null
        }
      } else {
        this.page = Object.assign({}, this.source)
      }
    }
  }
}
</script>
